<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    路由有规律
      /article/id
    使用的组件是同一个
    
    这个时候我们就可以使用动态路由

    就像文章的路由一样，有10000篇文章我们不可能创建一万个组件和路由，我们只需要写一个去适配10000个几个

    只要引入vue-router并且添加到vue的实例中，那么，vue中全局可获取一个值，$route

    动态路由会在$route中的params里创建一个属性，属性名为动态路由中动态值的名字，值为url最后对应动态值位置的值
  -->
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
    const article = {
      template: `
        <div>文章详情{{$route.params.id}}</div>
      `,
      // 在组件中接收id并且在组件中请求数据，将获取到的数据渲染到组件中
      created () {
        console.log(this.$route)
      }
    }

    const routes = [{
      // 动态路由只在一个地方不一样
      path: '/article/:id(\\d+)',
      component: article
    }]

    const router = new VueRouter({
      routes
    })

    const app = new Vue({
      el: '#app',
      router
    })
  </script>
</body>
</html>